<template>
  <div class="thread-pool-container">
    <!-- 信息展示 -->
    <el-card
      shadow="hover"
      class="box-card"
    >
      <template #header>
        <div class="card-header">
          <span>线程池状态</span>
          <el-button
            type="primary"
            @click="handleModify"
          >
            修改配置
          </el-button>
        </div>
      </template>

      <el-descriptions
        :column="2"
        border
      >
        <!-- 线程池配置 -->
        <el-descriptions-item label="核心线程数">{{ data.corePoolSize }}</el-descriptions-item>
        <el-descriptions-item label="最大线程数">{{ data.maximumPoolSize }}</el-descriptions-item>
        <el-descriptions-item label="队列容量">{{ data.queueCapacity }}</el-descriptions-item>
        <el-descriptions-item label="保活时间(s)">{{ data.keepAliveTime }}</el-descriptions-item>

        <!-- 运行状态 -->
        <el-descriptions-item label="活动线程">{{ data.activeThreads }}</el-descriptions-item>
        <el-descriptions-item label="完成任务">{{ data.completedTasks }}</el-descriptions-item>
        <el-descriptions-item label="队列任务">{{ data.queueSize }}</el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <!-- 系统信息 -->
      <el-descriptions
        title="系统信息"
        :column="2"
        border
      >
        <el-descriptions-item label="操作系统">
          {{ data.osName }} {{ data.osVersion }}
        </el-descriptions-item>
        <el-descriptions-item label="架构">{{ data.osArch }}</el-descriptions-item>
        <el-descriptions-item label="处理器">{{ data.availableProcessors }}</el-descriptions-item>
        <el-descriptions-item label="总内存">
          {{ formatMemory(data.totalMemory) }}
        </el-descriptions-item>
        <el-descriptions-item label="已用内存">
          {{ formatMemory(data.usedMemory) }}
        </el-descriptions-item>
        <el-descriptions-item label="最大内存">
          {{ formatMemory(data.maxMemory) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 修改对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="线程池配置"
      width="30%"
    >
      <el-form
        :model="form"
        label-width="140px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item
          label="核心线程数"
          prop="corePoolSize"
        >
          <el-input-number
            v-model="form.corePoolSize"
            :min="1"
          />
        </el-form-item>

        <el-form-item
          label="最大线程数"
          prop="maximumPoolSize"
        >
          <el-input-number
            v-model="form.maximumPoolSize"
            :min="1"
          />
        </el-form-item>

        <el-form-item
          label="队列容量"
          prop="queueCapacity"
        >
          <el-input-number
            v-model="form.queueCapacity"
            :min="0"
          />
        </el-form-item>

        <el-form-item
          label="保活时间(s)"
          prop="keepAliveTime"
        >
          <el-input-number
            v-model="form.keepAliveTime"
            :min="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import { getDynamicThreadPoolInfo, modifyDynamicThreadPool } from '@/api/dynamicThreadPool'
import { ElMessage } from 'element-plus'

interface ThreadPoolData {
  corePoolSize: number
  maximumPoolSize: number
  queueCapacity: number
  keepAliveTime: number
}

// 初始化数据
const data = ref<ThreadPoolData>({
  corePoolSize: 0,
  maximumPoolSize: 0,
  queueCapacity: 0,
  keepAliveTime: 0
})

const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
const form = reactive({
  corePoolSize: 10,
  maximumPoolSize: 20,
  queueCapacity: 100,
  keepAliveTime: 60
})

// 验证规则
const rules = {
  corePoolSize: [{ required: true, message: '请输入核心线程数' }],
  maximumPoolSize: [{ required: true, message: '请输入最大线程数' }],
  queueCapacity: [{ required: true, message: '请输入队列容量' }],
  keepAliveTime: [{ required: true, message: '请输入保活时间' }]
}

// 内存格式化
const formatMemory = (bytes: number) => {
  return `${(bytes / 1024 / 1024).toFixed(2)} MB`
}

const handleModify = () => {
  form.corePoolSize = data.value.corePoolSize
  form.maximumPoolSize = data.value.maximumPoolSize
  form.queueCapacity = data.value.queueCapacity
  form.keepAliveTime = data.value.keepAliveTime
  dialogVisible.value = true
}

// 提交处理
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    await modifyDynamicThreadPool(form)
    ElMessage.success('修改成功')
    dialogVisible.value = false
    data.value = await getDynamicThreadPoolInfo()
  } catch (e) {
    console.error('表单验证失败', e)
  }
}

// 初始化获取数据
onMounted(async () => {
  data.value = await getDynamicThreadPoolInfo()
})
</script>

<style scoped>
.thread-pool-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
